<template>
  <div style="height:100%;">
    <drawer
      width="200px;"
      :show.sync="drawerVisibility"
      :show-mode="showModeValue"
      :placement="showPlacementValue"
      :drawer-style="{'background-color':'#35495e', width: '200px'}">

      <!-- drawer content -->
      <div slot="drawer">
        <group title="预警管理" style="margin-top:20px;">
          <cell title="预警管理" link="/Home/Monitor/Index" @click.native="drawerVisibility = false">
          </cell>
        </group>
        <group title="信息统计" style="margin-top:20px;">
          <cell title="信息统计" link="/Home/Report/Index" @click.native="drawerVisibility = false">
          </cell>
        </group>
        <group title="用户管理" style="margin-top:20px;">
          <cell title="退出" @click.native="toLogOut">
          </cell>
        </group>
        <group title="showMode">
          <radio v-model="showMode" :options="['push', 'overlay']" @on-change="onShowModeChange"></radio>
        </group>
        <group title="placement">
          <radio v-model="showPlacement" :options="['left', 'right']" @on-change="onPlacementChange"></radio>
        </group>
      </div>

      <!-- main content -->
      <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">

        <x-header slot="header"
                  style="width:100%;position:absolute;left:0;top:0;z-index:100;"
                  :left-options="leftOptions"
                  :right-options="rightOptions"
                  :title="title"
                  :transition="headerTransition"
                  @on-click-more="onClickMore">
          <span v-if="route.path === '/Home' || route.path === '/Home/Index'" slot="overwrite-left"
                @click="drawerVisibility = !drawerVisibility">
            <x-icon type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
          </span>
        </x-header>

        <!-- remember to import BusPlugin in main.js if you use components: x-img and sticky -->
        <transition
          @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')"
          :name="viewTransition" :css="!!direction">
          <router-view class="router-view"></router-view>
        </transition>

        <tabbar class="vux-demo-tabbar" icon-class="vux-center" v-show="!isTabbarDemo" slot="bottom">
          <tabbar-item :link="{path:'/Home/Index'}" :selected="route.path === '/Home'">
            <img slot="icon" src="../assets/vux_logo.png">
            <span slot="label">Home</span>
          </tabbar-item>
        </tabbar>
      </view-box>
    </drawer>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import {
    Radio,
    Group,
    Cell,
    Badge,
    Drawer,
    ButtonTab,
    ButtonTabItem,
    ViewBox,
    XHeader,
    Tabbar,
    TabbarItem,
    Loading
  } from 'vux'

  export default {
    components: {
      Radio,
      Group,
      Cell,
      Badge,
      Drawer,
      ButtonTab,
      ButtonTabItem,
      ViewBox,
      XHeader,
      Tabbar,
      TabbarItem,
      Loading
    },
    methods: {
      onShowModeChange (val) {
        /** hide drawer before changing showMode **/
        this.drawerVisibility = false
        setTimeout(one => {
          this.showModeValue = val
        }, 400)
      },
      onPlacementChange (val) {
        /** hide drawer before changing position **/
        this.drawerVisibility = false
        setTimeout(one => {
          this.showPlacementValue = val
        }, 400)
      },
      onClickMore () {
        this.showMenu = true
      },
      toLogOut () {
        var r = this.$router
        this.$vux.confirm.show({
          // 组件除show外的属性
          title: '确认退出？',
          onCancel () {},
          onConfirm () {
            sessionStorage.removeItem('account')
            r.push('/')
          }
        })
      }
    },
    computed: {
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        direction: state => state.vux.direction
      }),
      leftOptions () {
        return {
          showBack: this.route.path !== '/'
        }
      },
      rightOptions () {
        return {
          showMore: false
        }
      },
      headerTransition () {
        if (!this.direction) return ''
        return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
      },
      componentName () {
        if (this.route.path) {
          const parts = this.route.path.split('/')
          if (/components/.test(this.route.path) && parts[2]) return parts[2]
        }
      },
      isTabbarDemo () {
        var result = /tabbar/.test(this.route.path)
        result = false
        return result
      },
      title () {
        if (this.route.path === '/Home' || this.route.path === '/Home/Index') return 'Home'
        if (/Monitor/.test(this.route.path)) {
          if (/Index/.test(this.route.path)) {
            return '预警管理'
          }
        }
        if (/Report/.test(this.route.path)) {
          if (/Index/.test(this.route.path)) {
            return '信息统计'
          }
        }
        return this.componentName ? `Home/${this.componentName}` : 'Home/~~'
      },
      viewTransition () {
        if (!this.direction) return ''
        return 'vux-pop-' + (this.direction === 'forward' ? 'in' : 'out')
      }
    },
    data () {
      return {
        showMenu: false,
        drawerVisibility: false,
        showMode: 'push',
        showModeValue: 'push',
        showPlacement: 'left',
        showPlacementValue: 'left'
      }
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/tap.less';

  body {
    background-color: #fbf9fe;
  }
  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  .vux-demo-tabbar .weui-bar__item_on {
    color: #F70968;
  }
  .vux-demo-tabbar .weui-tabbar_item.weui-bar__item_on .vux-demo-tabbar-icon-home {
    color: rgb(53, 73, 94);
  }
  .vux-demo-tabbar-component {
    background-color: #F70968;
    color: #fff;
    border-radius: 7px;
    padding: 0 4px;
    line-height: 14px;
  }
  .weui-tabbar__icon + .weui-tabbar__label {
    margin-top: 0!important;
  }

  .router-view {
    width: 100%;
    top: 46px;
  }
</style>
